<template>
  <div class="home-icons">
    <swiper ref="mySwiper">
      <swiper-slide v-for="(item, index) in pages"  :key="index">
        <div
          class="home-icons-wrap"
          v-for="item in pages[index]"
          :key="item.id">
          <div class="home-wrap-img">
            <img class="img-content" :src="item.imgUrl" alt="">
          </div>
          <p class="icon-desc">{{item.description}}</p>
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>
<script>
export default {
  name: 'HomeIcons',
  data () {
    return {
      List: [
        {
          id: 0,
          imgUrl: 'https://s.qunarzz.com/homenode/images/touchheader/hotel.png',
          description: '酒店'
        },
        {
          id: 1,
          imgUrl: 'https://s.qunarzz.com/homenode/images/touchheader/flight.png',
          description: '机票'
        },
        {
          id: 2,
          imgUrl: 'https://s.qunarzz.com/homenode/images/touchheader/train.png',
          description: '火车票'
        },
        {
          id: 3,
          imgUrl: 'https://s.qunarzz.com/homenode/images/touchheader/package.png',
          description: '度假'
        },
        {
          id: 4,
          imgUrl: 'https://s.qunarzz.com/homenode/images/touchheader/piao.png',
          description: '景点门票'
        },
        {
          id: 5,
          imgUrl: 'https://picbed.qunarzz.com/f5e5770393d759578962e53ee67798c8.png',
          description: '海外酒店'
        },
        {
          id: 6,
          imgUrl: 'https://picbed.qunarzz.com/a36d2288f19e54562338f4d8ef986288.png',
          description: '低价机票'
        },
        {
          id: 7,
          imgUrl: 'https://picbed.qunarzz.com/377db8cb2143aebf01869c9baad3d325.png',
          description: '汽车票船票'
        },
        {
          id: 8,
          imgUrl: 'https://picbed.qunarzz.com/ae617a31e0bd5803d76918b817f6d942.png',
          description: '自由行'
        }
      ]
    }
  },
  computed: {
    pages () {
      const pages = []
      this.List.forEach((item, index) => {
        const page = Math.floor(index / 8)
        if (!pages[page]) {
          pages[page] = []
        }
        pages[page].push(item)
      })
      return pages
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~css/variables.styl'
  @import '~css/mixins.styl'
  .home-icons >>> .swiper-container
    padding-bottom: 50%
    // background: pink
    height: 0
  .home-icons-wrap
    width: 25%
    padding-bottom: 25%
    // background: #ccc
    float: left
    height: 0
    overflow: hidden
    position: relative
    .home-wrap-img
      position: absolute
      top: 0
      left: 0
      right: 0
      bottom: .44rem
      padding: .15rem
      // background: red
      box-sizing: border-box
      .img-content
        display: block
        margin: 0 auto
        height: 100%
    .icon-desc
      color: $textColor
      position: absolute
      left: 0
      right: 0
      bottom: 0
      text-align: center
      height: .44rem
      line-height: .44rem
      ellipsis()
</style>
